<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<!--meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /--> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile - Namespace Demo</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
	<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" rel="stylesheet" /> 
	<link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" rel="stylesheet" /> 
	
	<!-- NOTE: Script load order is significant! -->
	
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
	<script type="text/javascript">
		
		//set namespace for unit test markp
		$( document ).bind( "mobileinit", function(){
			$.mobile.ns = "somens-";		
		});
		
	</script>
	<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
	
	<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/jQM-DateBox2/js/jqm-datebox.core.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/jQM-DateBox2/js/jqm-datebox.mode.calbox.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/jQM-DateBox2/js/jqm-datebox.mode.datebox.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/jQM-DateBox2/js/jqm-datebox.mode.flipbox.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/jQM-DateBox2/js/jqm-datebox.mode.durationbox.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/jQM-DateBox2/js/jqm-datebox.mode.slidebox.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.js"></script>
	
	<style>
		/* "page" containers - full-screen views, one should always be in view post-pageload */
		.ui-mobile [data-somens-role=page], .ui-mobile [data-somens-role=dialog], .ui-page { top: 0; left: 0; width: 100%; min-height: 100%; position: absolute; display: none; border: 0; }
		.ui-mobile .ui-page-active { display: block; overflow: visible; }
	</style>

	
</head>
<body>
<div data-somens-role="page" data-somens-theme="b"> 
	<div data-somens-role="header" data-somens-position="fixed"> 
		<a href="../../" data-somens-icon="home" data-somens-iconpos="notext">Home</a>
		<h1>jQueryMobile - DateBox</h1>
	</div>
	<div data-somens-role="content">
		<a data-somens-role="button" id="but" href='#'>Some Button</a>
		<div data-somens-role="fieldcontain">
			<label for="lang1">calbox</label>
			<input name="lang1" type="text" data-somens-role="datebox" data-somens-options='{"fixDateArrays": true, "blackDates":["2012-1-2","2012-01-04"], "mode": "calbox"}' id="lang1" />
		</div>
		<div data-somens-role="fieldcontain">
			<label for="aa1">text comparison</label>
			<input name="aa1" type="text" id="aa1" />
		</div>
		
		<div data-somens-role="fieldcontain" data-somens-theme='a'>
			<label for="lang2">datebox</label>
			<input name="lang2" type="text" data-somens-role="datebox" data-somens-options='{"mode": "datebox"}' id="lang2" />
		</div>
		<div data-somens-role="fieldcontain">
			<label for="lang3">flipbox</label>
			<input name="lang3" type="text" data-somens-role="datebox" data-somens-options='{"mode": "flipbox"}' id="lang3" />
		</div>
		<div data-somens-role="fieldcontain">
			<label for="lang4">slidebox</label>
			<input name="lang4" type="text" data-somens-role="datebox" data-somens-options='{"mode": "slidebox"}' id="lang4" />
		</div>
		<div data-somens-role="fieldcontain">
			<label for="lang7">durationbox</label>
			<input name="lang7" type="text" data-somens-role="datebox" data-somens-options='{"mode": "durationbox"}' id="lang7" />
		</div>
		
	</div>
	<div data-somens-role="footer" data-somens-position="fixed">
		<h3>Empty Footer</h3>
	</div>
</div>
</html>
